<!DOCTYPE html>
<html>
<head>
	<title>Simple list</title>
	<script type="text/javascript" src="js/knockoutjs.js"></script>
</head>
<body>
	<form data-bind="submit:addItem">
		New Item:
		<input type="text" data-bind='value:itemToAdd,valueUpdate:"afterkeydown"'>
		<button type="submit" data-bind="enable:itemToAdd().length>0">Add</button>
		<p>Your items:</p>
		<select name="" id="" multiple="multiple" width="50" data-bind="options:items"></select>
	</form>
</body>
<script>
	var SimpleListModel = function(items){
		this.items = ko.observableArray(items);
		this.itemToAdd = ko.observable("");
		this.addItem = function(){
			if(this.itemToAdd() != ""){
				this.items.push(this.itemToAdd());
				this.itemToAdd("");
			}
		}.bind(this);
	};

	ko.applyBindings(new SimpleListModel(["Alpha","Beta","Gamma"]));
</script>
</html>